<template>
  <a-modal title="用户选择" :visible="show" @ok="handleOk" @cancel="handleCancel" width="600px" :maskClosable="false">
    <div>
      <a-form-model ref="mainForm" :model="ipagination" layout="inline">
        <a-form-model-item>
          <a-input v-model="ipagination.keyword" @keyup.enter="fetchList"/>
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="fetchList">刷新</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      v-if="muti"
      :columns="columns"
      :data-source="records"
      rowKey="userName"
      bordered
      :pagination="ipagination"
      @change="handleTableChange"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
    </a-table>
    <a-table
      v-if="!muti"
      :columns="columns"
      :data-source="records"
      rowKey="userName"
      bordered
      :pagination="ipagination"
      @change="handleTableChange"
      :customRow="customRow"
    >
    </a-table>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    muti: {
      type: Boolean,
      default: false,
    },
    deptCode: {
      type: String,
      default: '-1',
    },
  },
  data() {
    return {
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0,
      },
      columns: [
        {
          title: '用户账号',
          dataIndex: 'username',
          key: 'username',
        },
        {
          title: '用户名称',
          dataIndex: 'realname',
          key: 'realname',
        },
        {
          title: '所属部门',
          dataIndex: 'deptName',
          key: 'deptName',
        },
      ],
      records: [],
      urls: {
        list: '/person/info/personList',
      },
      currentSelection: [],
      selectedRowKeys: [],
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    init() {
      this.currentSelection = []
      this.$set(this.ipagination, 'current', 1)
      this.$set(this.ipagination, 'pageSize', 10)
      this.selectedRowKeys = []
      this.fetchList()
    },
    async fetchList() {
      this.ipagination.deptCode = this.deptCode
      let res = await postAction(this.urls.list, this.ipagination)
      if (res.success) {
        this.records = res.result.records
        this.$set(this.ipagination, 'total', res.result.total)
      }
    },
    /**
     * 表结构切换页码
     */
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.fetchList()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.currentSelection = selectedRows
    },
    handleOk() {
      this.$emit('selected', this.currentSelection)
    },
    handleCancel(e) {
      this.$emit('selected', [])
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.currentSelection = [record]
            this.handleOk()
          },
           click: (event) => {
            this.currentSelection = [record]
          },
        },
      }
    },
  },
  watch: {
    show(newV, oldV) {
      this.currentSelection = []
      this.records = []
      this.selectedRowKeys = [],
      this.$set(this.ipagination, 'total', 0)
      this.fetchList()
    },
  },
}
</script>

<style>
</style> 